<template>
	<view>
		<view class="center_box">
			<view class="center_box_top">
				<view class="" style="display: flex;align-items: center;">
					<image :src="articelInfo.member_avatar" style="width: 64rpx;height: 64rpx;border-radius: 50%;" mode=""></image>
					<view class="center_box_top_txt">
						{{articelInfo.member_name}}
					</view>
				</view>
				<view class="center_box_top_time">
					{{articelInfo.create_time}}
				</view>
			</view>
			<view class="" v-html="articelInfo.content">
				
			</view>
		</view>
		<view class="dingwei">
			<view class="dingwei_box">
				<view class="dingwei_box_flex">
					<image @click="goComments" src="/static/index/xiaoxi.png" class="detail" mode=""></image>
					<view class="dingwei_box_txt">
						{{articelInfo.commentnum}}
					</view>
				</view>
				<view class="dingwei_box_flex">
					<image src="/static/index/liulang.png" class="" style="width: 48rpx;height: 34rpx;" mode=""></image>
					<view class="dingwei_box_txt">
						{{articelInfo.clicknum}}
					</view>
				</view>
			</view>
			<view class="" @click="toggleMask('show')">
				<image src="/static/index/wenzhang_pinlun.png" class="detail"  mode=""></image>
			</view>
			
		</view>
		<ygc-comment ref="ygcComment" 
		        :placeholder="'发布评论'" 
		        @pubComment="pubComment"></ygc-comment>
	</view>
</template>

<script>
	import Require from '../../../common/require.js';
	import ygcComment from '@/components/ygc-comment/ygc-comment.vue';
	export default {
		components: {ygcComment},
		
		data() {
			return {
				id:'',
				articelInfo:''
			};
		},
		onLoad(option) {
			var self=this;
			self.id=option.id;
			console.log(self.id)
			
		},
		onShow() {
			this.articleDetail();
		},
		methods:{
			articleDetail(){
				var self=this;
				Require.commonRequest({
					url:'/api/forum/forumdetail',
					data:{
						forum_id:self.id
					},
					method:'POST',
					success: function(ret) {
						  if(ret.data.code==200){
								console.log(ret.data.data)
								self.articelInfo=ret.data.data
							  }
						},
						fail: function() {
							uni.showToast({
								icon: "none",
								title: "网络异常，请稍后再试"
							})
						}
					})
			},
			toggleMask(type) {
				this.$refs.ygcComment.toggleMask(type);
			},
			pubComment(commentContent1) {
				var self=this;
				this.$refs.ygcComment.toggleMask();
				// console.log(commentContent1);
				this.$refs.ygcComment.content = '';
				Require.commonRequest({
					url:'/api/forum/forumcomment',
					data:{
						forum_id:self.id,
						comment_content:commentContent1
					},
					method:'POST',
					success: function(ret) {
						  if(ret.data.code==200){
                                    self.articleDetail();
							  }
						},
						fail: function() {
							uni.showToast({
								icon: "none",
								title: "网络异常，请稍后再试"
							})
						}
					})
			},
			goComments(){
				uni.navigateTo({
					url:'./articleEvaluation?id='+this.id
				})
				}
		}
	}
</script>

<style lang="scss">
.center_box{
	width: 750rpx;
	padding: 30rpx;
	box-sizing: border-box;
	border-top: 10rpx solid #EFEFF4;
	margin-bottom: 100rpx;
	.center_box_top{
		height: 64rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}
}
.center_box_top_txt{
	font-size:28rpx;
	font-family:PingFang SC;
	font-weight:bold;
	color:rgba(46,46,46,1);
	margin-left: 22rpx;
}
.center_box_top_time{
	font-size:28rpx;
	font-family:PingFang SC;
	font-weight:400;
	color:rgba(142,142,142,1);
	display: flex;
	align-items: center;
}
.dingwei{
	width: 750rpx;
	height: 100rpx;
	border-top: 1rpx solid #EFEFF4;
	position: fixed;
	bottom: 0;
	box-shadow:0px 0px 18rpx 2rpx rgba(116,34,216,0.14);
	background-color: #F7F7F7;
	display: flex;
	align-items: center;
	padding: 0 40rpx;
	justify-content: space-between;
	box-sizing: border-box;
}
.detail{
	width: 40rpx;
	height: 40rpx;
}
.dingwei_box{
	display: flex;
}
.dingwei_box_txt{
	font-size:30rpx;
	font-family:PingFang SC;
 	color:rgba(46,46,46,1);
	margin-left: 15rpx;
}
.dingwei_box_flex{
	display: flex;
	margin-right: 29rpx;
}
</style>
